Ionic Layouts এবং Components

Ionic ফ্রেমওয়ার্ক একটি শক্তিশালী UI লাইব্রেরি প্রদান করে, যা মোবাইল অ্যাপ্লিকেশন এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এই লাইব্রেরির মধ্যে বিভিন্ন layouts এবং components রয়েছে, যেগুলি দ্রুত এবং আধুনিক অ্যাপ তৈরি করতে ব্যবহৃত হয়। নিচে Ionic এর কিছু গুরুত্বপূর্ণ layout এবং component নিয়ে বিস্তারিত আলোচনা করা হলো।

১. Ionic Layouts

Ionic Layouts হল বিভিন্ন কন্টেন্ট সজ্জা বা ডিসপ্লে স্ট্রাকচার, যা অ্যাপের পেজগুলোকে সুন্দরভাবে সাজাতে সাহায্য করে। Ionic এ কিছু জনপ্রিয় layout টুল রয়েছে, যেমন grid system, flexbox এবং responsive utilities।

১.১ Grid System

Ionic এর Grid System (Flexbox ভিত্তিক) ব্যবহার করে আপনি বিভিন্ন সাইজের ডিভাইসের জন্য কন্টেন্টের লেআউট সাজাতে পারবেন। এটি rows এবং columns দিয়ে তৈরি হয়।

Grid System উদাহরণ:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6">
        <div class="box">Column 1</div>
      </ion-col>
      <ion-col size="6">
        <div class="box">Column 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

• <ion-grid>: গ্রিড কন্টেইনার।
• <ion-row>: রো (Row)।
• <ion-col>: কলাম (Column)।

এখানে size="6" দিয়ে প্রতিটি কলামকে ১২ ভাগের মধ্যে ৬ ভাগ করে দেয়া হয়েছে। আপনার ডিজাইনের প্রয়োজন অনুযায়ী আপনি কলামের সাইজ পরিবর্তন করতে পারবেন।

১.২ Flexbox Layout

Ionic এর flexbox ব্যবহারের মাধ্যমে, আপনি আরও উন্নত কন্টেন্ট সজ্জা তৈরি করতে পারেন। Flexbox ব্যবহার করে এলিমেন্টগুলিকে একটি সারিতে সাজানো যায় অথবা তাদের মধ্যে স্থান নির্ধারণ করা যায়।

Flexbox উদাহরণ:

<ion-content>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</ion-content>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .box {
    width: 30%;
    background-color: lightblue;
    padding: 10px;
  }
</style>

এখানে display: flex এবং justify-content: space-between ব্যবহার করা হয়েছে যাতে এলিমেন্টগুলো সমানভাবে একে অপরের থেকে সরে যায়।

১.৩ Responsive Layouts

Ionic স্বয়ংক্রিয়ভাবে আপনার অ্যাপের লেআউটগুলো মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য রেসপনসিভ করে তৈরি করে। তবে আপনি নিজে থেকেও breakpoints ব্যবহার করে রেসপনসিভ লেআউট তৈরি করতে পারেন।

Responsive Layout উদাহরণ:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-md="6">
        <div class="box">Responsive Column 1</div>
      </ion-col>
      <ion-col size="12" size-md="6">
        <div class="box">Responsive Column 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

এখানে, size="12" মোবাইলের জন্য, এবং size-md="6" ডেস্কটপের জন্য কলাম সাইজ নির্ধারণ করছে।

২. Ionic Components

Ionic এ বিভিন্ন ধরনের কম্পোনেন্ট রয়েছে, যেগুলি মোবাইল অ্যাপ্লিকেশন এবং ওয়েব অ্যাপ্লিকেশনকে ইউজার-ফ্রেন্ডলি এবং ইন্টারেক্টিভ করে তোলে। নিচে Ionic এর কিছু জনপ্রিয় কম্পোনেন্ট এর উদাহরণ দেয়া হলো।

২.১ Buttons

Ionic এ বিভিন্ন ধরনের বাটন স্টাইল রয়েছে, যেমন ফ্ল্যাট, আউটলাইন, এবং পূর্ণবর্ণ বাটন।

Button উদাহরণ:

<ion-button>Default Button</ion-button>
<ion-button color="primary">Primary Button</ion-button>
<ion-button fill="outline">Outline Button</ion-button>

এখানে color="primary" এবং fill="outline" দিয়ে বাটনের স্টাইল কাস্টমাইজ করা হয়েছে।

২.২ Cards

Ionic Cards হল তথ্য প্রদর্শনের জন্য উপযুক্ত একটি কম্পোনেন্ট। এটি সাধারণত ছবির সাথে টেক্সট বা অন্যান্য কন্টেন্ট শো করার জন্য ব্যবহৃত হয়।

Card উদাহরণ:

<ion-card>
  <img src="https://via.placeholder.com/150" />
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    This is an example of an Ionic card component.
  </ion-card-content>
</ion-card>

২.৩ Lists

Ionic Lists হল ডেটা প্রদর্শনের জন্য একটি গুরুত্বপূর্ণ কম্পোনেন্ট, যা সাধারণত নাম, বিবরণ এবং আইকনসহ তথ্য দেখাতে ব্যবহৃত হয়।

List উদাহরণ:

<ion-list>
  <ion-item>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
  </ion-item>
</ion-list>

২.৪ Modals

Ionic এর Modal কম্পোনেন্ট আপনাকে পপ-আপ উইন্ডো তৈরি করতে সাহায্য করে। এটি ব্যবহারকারীদের সাথে ইন্টারঅ্যাক্ট করার জন্য খুব উপকারী।

Modal উদাহরণ:

<ion-button (click)="presentModal()">Open Modal</ion-button>

<ng-template #modalContent>
  <ion-header>
    <ion-toolbar>
      <ion-title>Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    This is a modal example.
  </ion-content>
</ng-template>

এখানে presentModal() একটি ফাংশন যা মডাল খোলার জন্য ব্যবহৃত হয়।

২.৫ Tabs

Ionic Tabs কম্পোনেন্ট মোবাইল অ্যাপ্লিকেশনগুলিতে ট্যাব ভিত্তিক নেভিগেশন তৈরি করতে ব্যবহৃত হয়।

Tabs উদাহরণ:

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

এখানে, দুইটি ট্যাব home এবং settings তৈরি করা হয়েছে।

২.৬ Alert

Ionic Alert কম্পোনেন্ট ব্যবহারকারীদের সাথে সতর্কতা বা বার্তা শেয়ার করার জন্য ব্যবহৃত হয়।

Alert উদাহরণ:

<ion-button (click)="presentAlert()">Show Alert</ion-button>

<ng-template #alertContent>
  <ion-alert
    header="Alert"
    message="This is an alert message"
    buttons=["OK"]
  ></ion-alert>
</ng-template>

সারাংশ

Ionic Layouts এবং Components ডেভেলপারদের জন্য অ্যাপ্লিকেশন তৈরির প্রক্রিয়াকে সহজ এবং দ্রুত করে তোলে। Ionic Grid System, Flexbox, এবং Responsive Layouts এর মাধ্যমে আপনার অ্যাপকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শন করা যায়। এছাড়া, Ionic Components যেমন Buttons, Cards, Lists, Modals, Tabs, এবং Alerts ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

আপনি এই কম্পোনেন্ট এবং লেআউটগুলোকে কাস্টমাইজ এবং একত্রিত করে আপনার Ionic অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাক্টিভ এবং কার্যকরী করে তুলতে পারবেন।

Ionic একটি শক্তিশালী Layout System প্রদান করে যা দিয়ে আপনি অ্যাপ্লিকেশন ডিজাইন করতে পারবেন। এটি CSS Flexbox এবং Grid সিস্টেম ব্যবহার করে ওয়েব এবং মোবাইল অ্যাপ্লিকেশনগুলোর জন্য রেসপন্সিভ লেআউট তৈরি করতে সহায়তা করে। Ionic এর Layout System আপনাকে নমনীয় এবং উপযুক্ত ইন্টারফেস তৈরি করতে সাহায্য করে, যেটি বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।

১. Ionic এর Grid System

Ionic-এর Grid সিস্টেমটি একটি 12 কলামের গ্রিড লেআউট ব্যবহার করে। আপনি আপনার কন্টেন্টকে বিভিন্ন কলামে ভাগ করে ডিভাইসের আকার অনুসারে সেটি রেসপন্সিভ করতে পারবেন। Grid সিস্টেমটি ব্যবহার করার জন্য ion-grid, ion-row, এবং ion-col ট্যাগ ব্যবহার করতে হয়।

১.১ Grid System Example

<ion-grid>
  <ion-row>
    <ion-col size="12" size-md="6" size-lg="4">
      <div class="box">Column 1</div>
    </ion-col>
    <ion-col size="12" size-md="6" size-lg="4">
      <div class="box">Column 2</div>
    </ion-col>
    <ion-col size="12" size-md="6" size-lg="4">
      <div class="box">Column 3</div>
    </ion-col>
  </ion-row>
</ion-grid>

• ion-grid: এটি পুরো গ্রিড সিস্টেমের কনটেইনার।
• ion-row: এটি রো তৈরি করে যেখানে কলামগুলি রাখা হয়।
• ion-col: এটি কলাম তৈরি করে। এর মাধ্যমে আপনি প্রতিটি কলামের সাইজ নিয়ন্ত্রণ করতে পারেন। যেমন:
  • size="12": এটি একক কলামে 12 অংশের মধ্যে সমস্ত সেগমেন্ট ব্যবহার করে।
  • size-md="6": মিডিয়াম স্ক্রিনে এটি 6 অংশের মধ্যে কলামটি ভাগ করবে।
  • size-lg="4": লার্জ স্ক্রীনে এটি 4 অংশের মধ্যে কলামটি ভাগ করবে।

২. Flexbox ব্যবহার করে Layout

Ionic এর লেআউট সিস্টেমের একটি বড় অংশ হলো CSS Flexbox, যা কন্টেইনার এবং আইটেমগুলির মধ্যে স্থানের বিতরণ এবং সমন্বয়ের জন্য ব্যবহৃত হয়। Flexbox ব্যবহার করে আপনি সহজে কন্টেন্টের অ্যালাইনমেন্ট, ডিসট্রিবিউশন এবং রেসপন্সিভ সিস্টেম তৈরি করতে পারেন।

২.১ Flexbox Example

<ion-content>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</ion-content>

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.flex-item {
  background-color: #4CAF50;
  padding: 20px;
  color: white;
  text-align: center;
  margin: 10px;
}

• display: flex: এটি flexbox কনটেইনার তৈরি করে।
• justify-content: এটি কন্টেন্টের মধ্যে অবজেক্টের অবস্থান নিয়ন্ত্রণ করে (যেমন space-around, center, flex-start, flex-end ইত্যাদি)।
• align-items: এটি এক্স-অক্ষের প্রতি কন্টেন্টের অবস্থান নির্ধারণ করে।

Flexbox সিস্টেম দিয়ে আপনি সহজেই লেআউট বানাতে পারেন যা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে রেসপন্সিভ থাকে।

৩. Ionic এর Utility Classes

Ionic একটি বড় পরিমাণ Utility Classes প্রদান করে যা দিয়ে আপনি বিভিন্ন লেআউট এবং সেগুলোর স্টাইল খুব সহজে কাস্টমাইজ করতে পারেন। এগুলোর মধ্যে রয়েছে মارجিন, প্যাডিং, ফ্লেক্স, ডিসপ্লে এবং অ্যালাইনমেন্ট সম্পর্কিত ক্লাস।

৩.১ Utility Classes Example

<ion-content>
  <div class="ion-text-center ion-padding">
    <h1 class="ion-margin-bottom">Hello, Ionic!</h1>
    <p>This is a responsive layout using Ionic utility classes.</p>
  </div>
</ion-content>

• ion-text-center: টেক্সট সেন্টার করতে ব্যবহার করা হয়।
• ion-padding: প্যাডিং অ্যাড করে।
• ion-margin-bottom: নিচে মার্জিন অ্যাড করে।

Utility classes ব্যবহার করে আপনাকে সিএসএস কোড লিখতে হবে না এবং দ্রুত রেসপন্সিভ এবং স্টাইলিশ লেআউট তৈরি করতে পারবেন।

৪. Responsive Layouts with Breakpoints

Ionic এর responsive design সিস্টেমটি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী অ্যাডজাস্ট হয়। Ionic 3 এর পর থেকে এটি breakpoints এর মাধ্যমে কাজ করে, যার মাধ্যমে আপনি স্ক্রীন সাইজ অনুযায়ী লেআউট পরিবর্তন করতে পারবেন।

৪.১ Breakpoint Example

<ion-grid>
  <ion-row>
    <ion-col size="12" size-md="6" size-lg="4" size-xl="3">
      <div class="box">Responsive Column</div>
    </ion-col>
  </ion-row>
</ion-grid>

এখানে:

• size: এটি সবচেয়ে সাধারণ কলাম সাইজ, যা ছোট স্ক্রীনে 12 অংশে ভাগ হবে।
• size-md: মিডিয়াম স্ক্রীনে এটি 6 অংশে ভাগ হবে।
• size-lg: লার্জ স্ক্রীনে এটি 4 অংশে ভাগ হবে।
• size-xl: এক্সট্রা লার্জ স্ক্রীনে এটি 3 অংশে ভাগ হবে।

এই ভাবে আপনি Ionic এর মাধ্যমে সহজেই responsive layouts তৈরি করতে পারবেন, যাতে বিভিন্ন ডিভাইসের জন্য আপনার অ্যাপটি উপযুক্তভাবে কাজ করে।

৫. Ionic এর CSS Variables

Ionic এর CSS Variables ব্যবহার করে আপনি বিভিন্ন লেআউট এবং UI উপাদানের ডিজাইন কাস্টমাইজ করতে পারেন। এটি অ্যাপের থিমিং এবং রেসপন্সিভ স্টাইলিংয়ের জন্য খুবই উপকারী।

৫.১ CSS Variables Example

:root {
  --ion-background-color: #f0f0f0;
  --ion-text-color: #333;
  --ion-border-radius: 10px;
}

ion-card {
  background-color: var(--ion-background-color);
  color: var(--ion-text-color);
  border-radius: var(--ion-border-radius);
}

এখানে:

• --ion-background-color: ব্যাকগ্রাউন্ড রঙ সেট করে।
• --ion-text-color: টেক্সটের রঙ সেট করে।
• --ion-border-radius: বর্ডারের রেডিয়াস সেট করে।

CSS Variables এর মাধ্যমে আপনি অ্যাপের থিম এবং লেআউটগুলো খুব সহজে কাস্টমাইজ করতে পারবেন।

সারাংশ

Ionic এর Layout System মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য রেসপন্সিভ, ফ্লেক্সিবল এবং সিম্পল লেআউট তৈরি করার জন্য ডিজাইন করা হয়েছে। Grid system, Flexbox, Utility classes, CSS variables, এবং breakpoints সহ বিভিন্ন টুলস আপনাকে একটি মোবাইল-ফ্রেন্ডলি এবং রেসপন্সিভ অ্যাপ ডিজাইন করতে সাহায্য করে।

Ionic Framework এ Grid System একটি শক্তিশালী লেআউট টুল যা আপনার অ্যাপের কন্টেন্টকে সুন্দর এবং রেসপনসিভ (responsive) ভাবে সাজানোর জন্য ব্যবহৃত হয়। Ionic Grid System মূলত Flexbox এর উপর ভিত্তি করে কাজ করে এবং এটি আপনার কন্টেন্টকে বিভিন্ন ডিভাইসের স্ক্রীনে সুন্দরভাবে প্রদর্শন করতে সহায়তা করে।

Ionic Grid System দুটি প্রধান উপাদান নিয়ে কাজ করে:

1. ion-grid: এটি মূল গ্রিড কন্টেইনার হিসেবে কাজ করে।
2. ion-row: এটি একটি সারি তৈরি করে, যেখানে কলাম থাকবে।
3. ion-col: এটি গ্রিডের কলাম হিসাবে কাজ করে এবং এতে কন্টেন্ট রাখার জন্য ব্যবহার হয়।

এখন আমরা বিস্তারিতভাবে Grid System এর ব্যবহার শিখবো।

১. Grid System এর বেসিক ব্যবহার

Ionic Grid System এ ion-grid উপাদানটি গ্রিড কন্টেইনার হিসাবে কাজ করে, ion-row এর মাধ্যমে সারি তৈরি হয় এবং ion-col এর মাধ্যমে কলাম তৈরি করা হয়।

উদাহরণ:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="box">Column 1</div>
      </ion-col>
      <ion-col>
        <div class="box">Column 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

এখানে, ion-grid একটি কন্টেইনার হিসেবে কাজ করছে, ion-row একটি সারি তৈরি করছে, এবং ion-col দুটি কলাম তৈরি করছে। প্রতিটি কলামের মধ্যে একটি "box" ডিভ রয়েছে, যা কলামগুলোর মধ্যে কন্টেন্ট দেখানোর জন্য।

২. Grid System এর রেসপনসিভ ডিজাইন

Ionic Grid System রেসপনসিভ (responsive) ডিজাইনের জন্য উপযোগী। এর মানে হলো, আপনি বিভিন্ন ডিভাইসে গ্রিডের কলাম সংখ্যা বা আকার পরিবর্তন করতে পারেন।

ল্যাপটপ, ট্যাবলেট এবং মোবাইল ডিভাইসের জন্য ভিন্ন ভিন্ন কলাম সেট করা যায়।

উদাহরণ:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-md="6" size-lg="4">
        <div class="box">Column 1</div>
      </ion-col>
      <ion-col size="12" size-md="6" size-lg="4">
        <div class="box">Column 2</div>
      </ion-col>
      <ion-col size="12" size-md="6" size-lg="4">
        <div class="box">Column 3</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

এখানে:

• size="12": এটি মোবাইলের জন্য কলাম পূর্ণ-প্রস্থ (100%) করে।
• size-md="6": এটি medium devices (ট্যাবলেট) এর জন্য কলাম প্রস্থ 50% (6/12) করবে।
• size-lg="4": এটি large devices (ল্যাপটপ) এর জন্য কলাম প্রস্থ 33% (4/12) করবে।

এভাবে আপনি গ্রিড সিস্টেমে কন্টেন্টের আকার এবং কলামের সংখ্যা ডিভাইসের স্ক্রীনের আকার অনুযায়ী কাস্টমাইজ করতে পারেন।

৩. নেস্টেড (Nested) Grid ব্যবহার করা

আপনি যদি একটি কলামের ভিতরে আরো একটি গ্রিড সিস্টেম ব্যবহার করতে চান, তাহলে নেস্টেড গ্রিড ব্যবহার করতে পারেন।

উদাহরণ:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6">
        <ion-grid>
          <ion-row>
            <ion-col size="6">
              <div class="box">Nested Column 1</div>
            </ion-col>
            <ion-col size="6">
              <div class="box">Nested Column 2</div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ion-col size="6">
        <div class="box">Column 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

এখানে, প্রথম কলামে একটি নতুন গ্রিড সিস্টেম (Nested Grid) তৈরি করা হয়েছে, যেখানে আরো দুটি কলাম রয়েছে।

৪. Grid System এর অন্যান্য অপশন

Ionic Grid System এ কিছু অতিরিক্ত অপশনও রয়েছে যা আপনি কাস্টমাইজেশন করতে ব্যবহার করতে পারেন:

• offset: কলামটি নির্দিষ্ট সংখ্যক কলাম সরে গিয়ে প্রদর্শন হবে।

  উদাহরণ:

  <ion-col size="6" offset="3">
    <div class="box">Centered Column</div>
  </ion-col>
  

• push ও pull: কলামগুলোর স্থান পরিবর্তন করতে।

  উদাহরণ:

  <ion-col size="6" push="6">
    <div class="box">Push Column</div>
  </ion-col>
  

৫. Grid System এর স্টাইলিং

Grid System এর ব্যবহার করার সময় আপনি স্টাইলিং করতে চান, যেমন কলামগুলোর মধ্যে কিছু গ্যাপ, মার্জিন, বা প্যাডিং যোগ করতে পারেন।

.box {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
  border: 1px solid #ccc;
}

এটি কলামের কন্টেন্টকে সুন্দরভাবে প্রদর্শন করবে।

সারাংশ

Ionic Grid System হল একটি সহজ কিন্তু শক্তিশালী টুল যা আপনাকে রেসপনসিভ এবং সুশৃঙ্খল লেআউট তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি খুব সহজে আপনার অ্যাপের কন্টেন্টকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শন করতে পারবেন।

Ionic ফ্রেমওয়ার্কে অনেক প্রি-বিল্ট UI কম্পোনেন্ট রয়েছে যা অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সহজ এবং দ্রুত কাজ করতে সাহায্য করে। এখানে Button, Card, List, এবং Input কম্পোনেন্টসের ব্যবহার এবং কিভাবে এগুলো ব্যবহার করবেন তা আলোচনা করা হলো।

১. Button

Button কম্পোনেন্ট হল Ionic এর সবচেয়ে সাধারণ এবং ব্যবহারিক কম্পোনেন্টগুলোর একটি। এটি বিভিন্ন রঙ, সাইজ এবং স্টাইলে কাস্টমাইজ করা যায়।

উদাহরণ:

<ion-button>Default Button</ion-button>
<ion-button color="primary">Primary Button</ion-button>
<ion-button color="secondary" size="small">Small Secondary Button</ion-button>
<ion-button fill="clear" color="tertiary">Clear Button</ion-button>

Button Attributes:

• color: বাটনের রঙ (যেমন: primary, secondary, danger, tertiary ইত্যাদি)।
• size: বাটনের সাইজ (যেমন: small, default, large)।
• fill: বাটনের ভিন্ন স্টাইল (যেমন: solid, outline, clear)।

২. Card

Card কম্পোনেন্ট একটি কন্টেইনার যা কন্টেন্ট বা মিডিয়া (ছবি, টেক্সট, বাটন ইত্যাদি) দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত একটি টাইটেল, সাবটাইটেল, ছবি এবং বাটনসহ থাকে।

উদাহরণ:

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    This is the content of the card. You can add text, images, or anything you want.
  </ion-card-content>

  <ion-button>Click Me</ion-button>
</ion-card>

Card Attributes:

• ion-card-header: কার্ডের হেডার সেকশন, যেখানে টাইটেল এবং সাবটাইটেল থাকে।
• ion-card-title: কার্ডের শিরোনাম।
• ion-card-subtitle: কার্ডের উপশিরোনাম।
• ion-card-content: কার্ডের মূল কনটেন্ট।

৩. List

List কম্পোনেন্ট ব্যবহারকারীদের জন্য একটি লিস্টভিউ তৈরি করতে সাহায্য করে, যেখানে বিভিন্ন আইটেম রাখা যায়। আপনি প্রতিটি আইটেমের জন্য লেবেল, বাটন বা ইমেজ ইত্যাদি যোগ করতে পারেন।

উদাহরণ:

<ion-list>
  <ion-item>
    <ion-label>Item 1</ion-label>
    <ion-button slot="end">Action</ion-button>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
    <ion-button slot="end">Action</ion-button>
  </ion-item>
  <ion-item>
    <ion-label>Item 3</ion-label>
    <ion-button slot="end">Action</ion-button>
  </ion-item>
</ion-list>

List Attributes:

• ion-item: লিস্ট আইটেম।
• ion-label: আইটেমের লেবেল বা টেক্সট।
• slot="end": বাটন বা অ্যাকশন আইটেমের শেষ অংশে থাকবে এমন নির্দেশনা।

৪. Input

Input কম্পোনেন্ট ব্যবহারকারীদের ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের ইনপুট যেমন টেক্সট, পাসওয়ার্ড, ইমেইল ইত্যাদি গ্রহণ করতে পারে।

উদাহরণ:

<ion-item>
  <ion-label position="floating">Username</ion-label>
  <ion-input type="text" placeholder="Enter your username"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" placeholder="Enter your password"></ion-input>
</ion-item>

Input Attributes:

• type: ইনপুট ফিল্ডের টাইপ (যেমন: text, password, email, number ইত্যাদি)।
• placeholder: ইনপুট ফিল্ডের মধ্যে প্রদর্শিত টেক্সট, যেমন "Enter your username"।
• position: floating অথবা stacked অপশন দিয়ে লেবেলটি কিভাবে দেখাবে তা নির্ধারণ করা যায়।

সারাংশ

• Button: বাটন কম্পোনেন্ট ব্যবহার করে অ্যাকশন তৈরি করা যায়, এবং এটি বিভিন্ন স্টাইলে কাস্টমাইজ করা যায়।
• Card: একটি কন্টেইনার যা কন্টেন্ট বা মিডিয়া প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন টাইটেল, সাবটাইটেল, ছবি ইত্যাদি।
• List: আইটেমগুলোর লিস্ট তৈরি করতে ব্যবহৃত হয়, এবং প্রতিটি আইটেমে বাটন এবং অন্যান্য কন্টেন্ট যোগ করা যায়।
• Input: ইনপুট ফিল্ড তৈরি করতে ব্যবহৃত হয় যা বিভিন্ন ধরনের ডেটা গ্রহণ করতে পারে।

এগুলি Ionic এর কিছু সাধারণ এবং খুবই কার্যকরী কম্পোনেন্ট যা আপনাকে আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টে সাহায্য করবে।

Ionic ফ্রেমওয়ার্কে অনেক ধরনের UI Components রয়েছে যা আপনাকে দ্রুত এবং সুন্দর মোবাইল অ্যাপ্লিকেশন ডিজাইন করতে সাহায্য করে। Ionic এর UI কম্পোনেন্টগুলো নেটিভ লুক এবং ফিল নিয়ে তৈরি করা হয়েছে, যা মোবাইল প্ল্যাটফর্মে সঠিকভাবে কাজ করে।

নিচে Ionic এর কিছু সাধারণ এবং জনপ্রিয় UI কম্পোনেন্টের বর্ণনা দেয়া হলো:

১. Buttons

Ionic এ বিভিন্ন ধরনের বাটন পাওয়া যায় যা অ্যাপ্লিকেশনে বিভিন্ন অ্যাকশন ট্রিগার করতে ব্যবহৃত হয়। উদাহরণস্বরূপ:

<ion-button>Click Me</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary" expand="full">Full Width</ion-button>

• color: বাটনের রঙ নির্ধারণ করতে।
• expand: বাটনকে পুরো স্ক্রীনে এক্সপ্যান্ড করতে।

২. Cards

Card কম্পোনেন্ট একটি কনটেইনার যা বিভিন্ন কন্টেন্ট যেমন টেক্সট, ইমেজ, এবং অ্যাকশন বাটন ধারণ করতে পারে।

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    This is an example card with some content.
  </ion-card-content>
</ion-card>

• ion-card-header: কার্ডের হেডার অংশ।
• ion-card-title: কার্ডের শিরোনাম।
• ion-card-content: কার্ডের মূল কন্টেন্ট।

৩. List

Ionic-এ ion-list কম্পোনেন্ট ব্যবহার করে একটি তালিকা তৈরি করা যায় যা অনেক আইটেম ধারণ করতে পারে। এটি মোবাইল অ্যাপের জন্য একটি আদর্শ কম্পোনেন্ট।

<ion-list>
  <ion-item>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 3</ion-label>
  </ion-item>
</ion-list>

• ion-item: তালিকার প্রতিটি আইটেম।
• ion-label: আইটেমের টেক্সট।

৪. Tabs

Ionic এ ট্যাব ভিত্তিক নেভিগেশন তৈরির জন্য ion-tabs কম্পোনেন্ট ব্যবহৃত হয়। এটি অ্যাপের মধ্যে বিভিন্ন সেকশন বা পেজের মধ্যে স্যুইচ করতে সাহায্য করে।

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

• ion-tab-bar: ট্যাবের নেভিগেশন বার।
• ion-tab-button: প্রতিটি ট্যাব বাটন।

৫. Modals

Modals হল পপ-আপ উইন্ডো যা কোনো অ্যাকশন করার জন্য ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য ব্যবহৃত হয়।

<ion-button (click)="openModal()">Open Modal</ion-button>

এই কম্পোনেন্টটি মোবাইল অ্যাপের জন্য ডায়ালগ বক্স বা পপ-আপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। আপনি একটি ModalController ব্যবহার করে এটি কন্ট্রোল করতে পারেন।

৬. Toast Notifications

Ionic এর ion-toast কম্পোনেন্ট ব্যবহার করে অ্যাপের মধ্যে টুকরো টুকরো নোটিফিকেশন বা বার্তা প্রদর্শন করা যায়।

<ion-toast-controller></ion-toast-controller>

Toast সাধারণত অল্প সময়ের জন্য স্ক্রীনে প্রদর্শিত হয় এবং স্বয়ংক্রিয়ভাবে অদৃশ্য হয়ে যায়।

৭. Alert

ion-alert কম্পোনেন্ট ব্যবহার করে আপনি গুরুত্বপূর্ণ বার্তা বা কনফার্মেশন পপ-আপ তৈরি করতে পারেন।

<ion-button (click)="showAlert()">Show Alert</ion-button>

এটি সাধারণত অ্যাপের মধ্যে ইউজারের কোনো অ্যাকশন নিশ্চিত করতে ব্যবহৃত হয় (যেমন, ডিলিট কনফার্মেশন)।

৮. Sliders

Ionic এর ion-slides কম্পোনেন্ট ব্যবহার করে স্লাইডিং গ্যালারী বা কাস্টম স্লাইডার তৈরি করা যায়।

<ion-slides>
  <ion-slide>
    <img src="slide1.jpg">
  </ion-slide>
  <ion-slide>
    <img src="slide2.jpg">
  </ion-slide>
</ion-slides>

এটি ব্যবহারকারীদের ইন্টারঅ্যাক্টিভ স্লাইড করতে সাহায্য করে এবং সাধারণত গ্যালারী বা প্রেজেন্টেশন মোডে ব্যবহৃত হয়।

৯. Checkboxes এবং Radio Buttons

Ionic এ চেকবক্স এবং রেডিও বাটন ব্যবহৃত হয় ব্যবহারকারীর ইনপুট সংগ্রহ করতে।

<ion-item>
  <ion-label>Agree to Terms</ion-label>
  <ion-checkbox slot="start"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Option 1</ion-label>
  <ion-radio slot="start" value="1"></ion-radio>
</ion-item>
<ion-item>
  <ion-label>Option 2</ion-label>
  <ion-radio slot="start" value="2"></ion-radio>
</ion-item>

১০. Select

ion-select কম্পোনেন্ট ড্রপডাউন নির্বাচন করতে ব্যবহৃত হয়।

<ion-item>
  <ion-label>Choose a fruit</ion-label>
  <ion-select placeholder="Select One">
    <ion-select-option value="apple">Apple</ion-select-option>
    <ion-select-option value="banana">Banana</ion-select-option>
    <ion-select-option value="orange">Orange</ion-select-option>
  </ion-select>
</ion-item>

১১. Range

ion-range কম্পোনেন্টটি স্লাইডার হিসেবে ব্যবহার করা হয়, যাতে ব্যবহারকারী নির্দিষ্ট পরিসরে মান নির্বাচন করতে পারে।

<ion-item>
  <ion-label>Price</ion-label>
  <ion-range min="0" max="100" step="1" value="50"></ion-range>
</ion-item>

১২. Spinner

Ionic এর ion-spinner কম্পোনেন্ট ব্যবহারকারীদের জন্য লোডিং ইনডিকেটর প্রদর্শন করতে ব্যবহৃত হয়।

<ion-spinner name="dots"></ion-spinner>

উপসংহার

Ionic এর UI কম্পোনেন্টগুলি মোবাইল অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় অনেক ধরনের ফিচার সরবরাহ করে, যেমন বাটন, তালিকা, ট্যাব, মডাল, স্লাইডার ইত্যাদি। এই কম্পোনেন্টগুলো অ্যাপ ডেভেলপমেন্টকে সহজ, সুন্দর এবং কার্যকর করে তোলে। আপনি Ionic CLI দিয়ে এসব কম্পোনেন্ট সহজে আপনার অ্যাপে ইমপ্লিমেন্ট করতে পারেন।